Tema 3.5: JavaScript - Programación del Lado del Cliente

JavaScript es el lenguaje de programación más importante para el desarrollo web frontend, permitiendo crear páginas web interactivas, dinámicas y responsivas. Es un lenguaje interpretado que se ejecuta en el navegador del cliente y se ha convertido en fundamental para la web moderna.

En este tema exploraremos desde los fundamentos de JavaScript hasta técnicas avanzadas como manipulación del DOM, programación asíncrona, AJAX y el uso de APIs modernas. Aprenderemos a crear experiencias web interactivas y dinámicas.

Videos de Aprendizaje

3.5.1 JavaScript no era útil

Perspectiva histórica sobre la evolución de JavaScript, desde sus humildes comienzos hasta convertirse en uno de los lenguajes más importantes del desarrollo web moderno.

3.5.2 JavaScript: historia

Recorrido detallado por la historia de JavaScript, sus principales hitos, estandarización y cómo llegó a dominar el desarrollo web frontend.

3.5.3 Curso JavaScript

Curso completo de JavaScript que cubre desde los fundamentos básicos hasta conceptos avanzados, incluyendo ejercicios prácticos y proyectos reales.

Contenido Opcional

JavaScript Avanzado 1

Técnicas avanzadas de JavaScript incluyendo closures, prototipos, programación funcional y patrones de diseño específicos del lenguaje.

JavaScript Avanzado 2

Continuación de técnicas avanzadas con enfoque en asincronía, promesas, async/await y manejo avanzado de eventos y APIs del navegador.

Investigación Detallada

Fundamentos de JavaScript

JavaScript es un lenguaje interpretado, dinámico y débilmente tipado. Conceptos esenciales: variables (let, const, var), tipos de datos (primitivos y objetos), funciones, estructuras de control (if, for, while), y operadores. Usa el estándar ECMAScript.

Manipulación del DOM

El Document Object Model (DOM) representa la estructura HTML como árbol de objetos. JavaScript puede: seleccionar elementos (getElementById, querySelector), modificar contenido (innerHTML, textContent), cambiar estilos (style.property), y manejar eventos (addEventListener).

Programación Asíncrona

JavaScript maneja operaciones asíncronas mediante: callbacks, promesas (then/catch), y async/await. Esto permite ejecutar código sin bloquear el hilo principal, esencial para operaciones de red, temporizadores y E/S.

AJAX y Fetch API

AJAX (Asynchronous JavaScript and XML) permite comunicación asíncrona con servidores. La Fetch API moderna reemplaza XMLHttpRequest: fetch(url).then(response => response.json()). Permite crear aplicaciones web dinámicas sin recargar la página.

ES6+ y Características Modernas

ECMAScript 6+ introdujo: arrow functions, template literals, destructuring, spread/rest operators, classes, y módulos. Estas características mejoran la legibilidad, mantenibilidad y potencia del lenguaje.

Buenas Prácticas y Depuración

Mejores prácticas: código modular, manejo de errores (try/catch), validación de datos, y optimización de performance. Herramientas de depuración: console métodos, debugger, y DevTools del navegador.

Características Fundamentales de JavaScript

Lenguaje del lado del cliente: Se ejecuta en el navegador del usuario
Interpretado: No necesita compilación previa
Orientado a objetos basado en prototipos: No usa clases tradicionales (hasta ES6)
Funciones de primera clase: Las funciones pueden ser asignadas a variables
Asíncrono y no bloqueante: Maneja operaciones concurrentes eficientemente
Dinámico: Tipado débil y estructura flexible
Multi-paradigma: Soporta programación procedural, OOP y funcional
Universal: Funciona en todos los navegadores modernos

Laboratorio 1 - Lógica de Programación

Ejercicios de Lógica de Programación

Instrucciones del Laboratorio 1

Metodología: Ver las instrucciones de cada ejercicio, pausar el video para realizarlo, y luego comparar con la solución propuesta por Jonathan MirCha
Repaso: Se pueden repasar los videos anteriores las veces que sea necesario
Cobertura completa: Elaborar TODOS los ejercicios de lógica de programación
Práctica: Estos ejercicios son fundamentales para desarrollar el pensamiento algorítmico

Temas de Lógica de Programación:

Variables y operadores: Declaración, asignación, operaciones matemáticas
Estructuras de control: Condicionales (if/else, switch), bucles (for, while)
Funciones: Definición, parámetros, retorno de valores
Arrays y objetos: Manipulación de estructuras de datos
Algoritmos básicos: Búsqueda, ordenamiento, patrones

Evaluación Laboratorio 1 - Lógica de Programación

Actividad	Primera Entrega	Segunda Entrega
Subir ejercicios de lógica de programación

Laboratorio 2 - HTML DOM

Ejercicios de Manipulación del DOM

Instrucciones del Laboratorio 2

Metodología: Ver las instrucciones de cada ejercicio, pausar el video para realizarlo, y luego comparar con la solución propuesta por Jonathan MirCha
Repaso: Se pueden repasar los videos anteriores las veces que sea necesario
Cobertura completa: Elaborar TODOS los ejercicios de HTML DOM
Enfoque práctico: Estos ejercicios desarrollan habilidades esenciales para crear interfaces interactivas

Temas de HTML DOM:

Selección de elementos: Métodos getElementById, querySelector, etc.
Manipulación de contenido: innerHTML, textContent, value
Modificación de estilos: style property, classList
Manejo de eventos: addEventListener, event objects
Creación de elementos: createElement, appendChild
Formularios dinámicos: Validación, envío, reset

Evaluación Laboratorio 2 - HTML DOM

Actividad	Primera Entrega	Segunda Entrega
Subir ejercicios de HTML DOM

Laboratorio 3 - AJAX

Ejercicios de AJAX y APIs

Instrucciones del Laboratorio 3

Metodología: Ver las instrucciones de cada ejercicio, pausar el video para realizarlo, y luego comparar con la solución propuesta por Jonathan MirCha
Repaso: Se pueden repasar los videos anteriores las veces que sea necesario
Cantidad: Elaborar entre 2 y 5 ejercicios de AJAX
Enfoque práctico: Estos ejercicios son esenciales para crear aplicaciones web modernas que se comuniquen con servidores

Temas de AJAX:

Fetch API: Peticiones GET, POST, PUT, DELETE
Manejo de respuestas: JSON, texto, formularios
Async/await: Sintaxis moderna para código asíncrono
Manejo de errores: Try/catch con peticiones HTTP
APIs públicas: Consumo de servicios web externos
Actualización dinámica: Modificar DOM con datos de servidor

Material de Lectura

Guía del Tema 3.5: JavaScript - Programación del Lado del Cliente

Documento oficial con teoría detallada sobre JavaScript, fundamentos del lenguaje, manipulación del DOM, programación asíncrona, AJAX y mejores prácticas. Nota: El material de lectura para este tema está en desarrollo y estará disponible próximamente.

Material en Desarrollo

La guía completa del Tema 3.5 estará disponible próximamente.

Módulo 3: Desarrollo Web y Tecnologías Emergentes